<template>
  <el-row>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ name: 'dashboard' }">控制台</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ name: 'notice' }">全服公告</el-breadcrumb-item>
      <el-breadcrumb-item>新建全服公告</el-breadcrumb-item>
    </el-breadcrumb>

    <blank />

    <el-row>
      <el-col>
        <h4>全服公告标题</h4>
        
        <el-input v-model="title"></el-input>
      </el-col>
    </el-row>

    <blank />

    <el-row class="upload-container">
      <el-col :span="24">
        <h4>选择图片文件</h4>

        <el-upload
          ref="upload"
          class="upload"
          drag
          :action="fileServer"
          :mutiple="true"
          :on-success="uploadOK"
          :before-upload="clear">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>

        <div v-if="src" style="color: green;font-weight:bold">
          上传成功
        </div>

      </el-col>
    </el-row>

    <blank />

    <el-row>
      <el-col :span="24">
        <el-button type="primary" size="large" @click=" callDialog = !callDialog ">预览图片</el-button>
        <el-button type="success" size="large" @click="save()">发送公告</el-button>        
      </el-col>
    </el-row>

    <el-dialog title='查看图片' v-model="callDialog">
      <div class="preview-container" v-if="src">
        <img :src="src" class="preview-img" />
      </div>
    </el-dialog>

  </el-row>
</template>

<script>
  import blank from '@/components/Blank'
  import { Message } from 'element-ui'
  import ax, { errhandler, domain } from '@/api/_axios-config'
  import * as apis from '@/api/_api'
  import router from '@/router'

  export default {
    name: 'addnotice',
    data () {
      return {
        src: null,
        fileServer: domain + apis.FILE_UPLOAD,
        callDialog: false,
        title: '',
        domain: domain
      }
    },
    methods: {
      uploadOK (response, file, fileList) {
        var prefix = domain
        var path = prefix + response
        this.src = path
        this.$refs.upload.clearFiles()
      },
      clear (file) {
        this.src = ''
      },
      save () {
        if (this.title === '' || this.title === null) {
          Message.error('未填写标题')
          return
        }

        this.$confirm('发送之后无法修改，请确认公告数据无误，谨慎操作', '提示', {
          confirmButtonText: '确认发送',
          cancelButtonText: '返回修改',
          type: 'warning'
        }).then(() => {
          let payload = { Title: this.title, ImgUrl: this.src }
          ax.post(apis.ADD_NOTICE, payload).then(
            response => {
              var result = response.data
              if (result.BoolStatus) {
                this.$alert('发送成功', '结果', {
                  confirmButtonText: '确定',
                  callback: action => {
                    router.go(0)
                  }
                })
              } else {
                Message.error(result.Message)
              }
            }
          ).catch(
            err => {
              errhandler(err)
            }
          )
        }).catch(() => {
          Message.info('发送已取消')
        })
      }
    },
    components: { blank }
  }
</script>

<style lang="stylus">

.el-dropdown-link
  cursor pointer
  color #20a0ff

.upload-container
  width 360px

div.preview-container
    width 100%
    img.preview-img
      display block
      max-width 100%
      margin auto
      border 1px solid gray
</style>
